<template>
  <x-drawer v-if="detail" :visible.sync="serviceVisible" title="联系商家" @cancel="handleCancel">
    <view class="x-service-drawer">
      <template v-if="isCompany">
        <x-button
          :businessId="storeInfo.businessId"
          :session-from="sessionFrom"
          open-type="contact"
          type="default"
          priority="default"
          size="none"
          styles="background: none;padding: 0"
          @click="handleCustomer"
        >
          <x-cell title="在线客服" suffix-icon="icon-079" suffix-icon-size="50" />
        </x-button>
        <x-button
          v-if="isRefundButton"
          type="default"
          priority="default"
          size="none"
          styles="background: none;padding: 0"
          @click="handleOrderDetail(detail)"
        >
          <x-cell title="申请售后" suffix-icon="icon-081" suffix-icon-size="50" />
        </x-button>
        <x-button
          :businessId="1"
          :session-from="sessionFrom"
          :open-type="contactWay ? '' : 'contact'"
          type="default"
          priority="default"
          size="none"
          styles="background: none;padding: 0"
          @click="handleOfficialCustomer"
        >
          <x-cell title="官方客服" suffix-icon="icon-080" suffix-icon-size="50" last />
        </x-button>
      </template>
      <template v-else>
        <x-button
          v-if="isOpenApp"
          type="default"
          priority="default"
          size="none"
          styles="background: none;padding: 0"
          @click="handleJumpCustomer"
        >
          <x-cell title="在线客服" suffix-icon="icon-079" suffix-icon-size="50" />
        </x-button>
        <x-button
          v-else
          :businessId="storeInfo.businessId"
          :session-from="sessionFrom"
          open-type="contact"
          type="default"
          priority="default"
          size="none"
          styles="background: none;padding: 0"
          @click="handleCustomer"
        >
          <x-cell title="在线客服" suffix-icon="icon-079" suffix-icon-size="50" />
        </x-button>

        <x-button
          v-if="isRefundButton"
          type="default"
          priority="default"
          size="none"
          styles="background: none;padding: 0"
          @click="handleOrderDetail(detail)"
        >
          <x-cell title="申请售后" suffix-icon="icon-081" suffix-icon-size="50" />
        </x-button>

        <x-button
          :businessId="1"
          :session-from="sessionFrom"
          :open-type="contactWay ? '' : 'contact'"
          type="default"
          priority="default"
          size="none"
          styles="background: none;padding: 0"
          @click="handleOfficialCustomer"
        >
          <x-cell title="官方客服" suffix-icon="icon-080" suffix-icon-size="50" last />
        </x-button>
      </template>
      <view v-if="insetBottom" class="safe-area-inset-bottom" />
    </view>
  </x-drawer>
</template>

<script>
import config from '@/config';
import XDrawer from '@/components/x-drawer';
import XCell from '@/components/x-cell';
import XButton from '@/components/x-button';

export default {
  name: 'PDrawer',
  components: {
    XButton,
    XDrawer,
    XCell
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    detail: {
      type: Object,
      default: () => null
    },
    contactWay: {
      type: String,
      default: ''
    },
    corpId: {
      type: [String, Number],
      default: ''
    },
    insetBottom: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 第三方开发平台
      isOpenApp: config.isOpen,
      isSaas: config.project === 'saas',
      serviceVisible: this.visible,
      storeInfo: {},
      sessionFrom: '',
      isCompany: false
    };
  },
  computed: {
    isRefundButton() {
      const { orderStatus, completedAt } = this.detail || {};
      let isCompletedAt = completedAt && orderStatus === 3;
      if (isCompletedAt) {
        // 订单已过确认收货15天之后，点击联系商家按钮不展示申请售后按钮
        const { day } = this.$tools.formatTimeDiff(completedAt, new Date());
        isCompletedAt = day <= 15;
      }
      return ![0, 4].includes(orderStatus) || isCompletedAt;
    }
  },
  watch: {
    visible(val) {
      this.serviceVisible = val;
    }
  },
  created() {
    this.getStoreInfo();
  },
  methods: {
    handleCancel() {
      this.$emit('update:visible', false);
    },
    // 获取店铺信息
    getStoreInfo() {
      this.$http({
        url: '/account/store/base/info',
        method: 'get',
        data: {
          storeId: this.detail.storeId
        }
      }).then(res => {
        // 如果不是桃红主体的，走商家的客服
        if (res.data?.channelCompanyName !== '杭州桃红网络有限公司') {
          this.isCompany = true;
        }
        this.storeInfo = res.data || {};
        const { pageId, orderNo, pageTitle, productTitle, productId } = this.detail;
        if (pageId) {
          this.sessionFrom = `【订单详情】订单编号：${orderNo}；页面名称：${pageTitle || productTitle}；页面ID：${pageId}`;
        } else {
          this.sessionFrom = `【订单详情】订单编号：${orderNo}；商品名称：${productTitle}；商品ID：${productId}`;
        }
      }).catch(err => {
        console.log(err);
      });
    },
    // 普通客服
    handleCustomer() {
      this.$emit('update:visible', false);
    },
    // 联系客服-企业微信
    handleJumpCustomer() {
      const storeInfo = this.storeInfo || {};
      this.$tools.$formatCustomerServiceChat(storeInfo);
      this.$emit('update:visible', false);
    },
    // 官方客服
    handleOfficialCustomer() {
      if (this.contactWay) {
        this.$openCustomerServiceChat(this.contactWay, {
          corpId: this.corpId
        });
      }
      this.$emit('update:visible', false);
    },
    // 前往订单详情
    handleOrderDetail(item) {
      this.$emit('update:visible', false);
      uni.navigateTo({
        url: `/packages/order/detail/index?orderId=${item.id}`
      });
    }
  }
};
</script>

<style>

</style>
